import { Checkbox, Space, Typography } from 'antd';
import { FC } from 'react';
import { defaultProps, ComponentProps } from './interface';

const { Paragraph } = Typography;

const Component: FC<ComponentProps> = (props) => {
  const { isVertical, title, list } = { ...defaultProps, ...props };
  const direction = isVertical ? 'vertical' : 'horizontal';

  const checkBoxList = list?.map((item) => {
    return (
      <Checkbox key={item.value} value={item.value} checked={item.checked}>
        {item.text}
      </Checkbox>
    );
  });

  return (
    <>
      <Paragraph strong>{title}</Paragraph>
      <Space direction={direction}>{checkBoxList}</Space>
    </>
  );
};

export default Component;
